<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 节流:在规定时间内显示数据---不到时间不显示 -->
    <input type="text" id="text">
    <div class="box"></div>
    <script>
        function fandou(callback, await) {
            var obj;
            var timerId = null;
            var fn = function() {
                callback.apply(obj) //:将callback的this执行到obj上
            };
            var nowTime = Date.now();
            return function() {
                obj = this;
                var oTime = Date.now();

                // await等待的时间
                var time = oTime - nowTime - await;
                if (time >= 0) {
                    nowTime = oTime;
                    timerId = setTimeout(fn, await);
                }
            }
        };

        var inputText = document.querySelector('#text');
        var box = document.querySelector('.box');

        // 设置当前事件内然后设置值
        inputText.oninput = fandou(function() {
            box.innerHTML = inputText.value;
        }, 3000)
    </script>
</body>

</html>